<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />

    <title>聊天室</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            text-align: center;
        }

        .main {
            width: 100%;
            height: 100%;
            border-collapse: collapse;
        }

        .main td {
            border: solid 1px #00acee;
        }

        .title {
            height: 4vh;
            font-size: 4vh;
            line-height: 4vh;
            background-color: #00acee;
        }

        .btns {
            height: 4vh;
            background: #00acee;
        }

        .btns span {
            cursor: pointer;
        }

        .chatBox {

        }

        .online {
            width: 20%;
        }
        .online ul {
            height: 100%;
            overflow: auto;
        }

        .inputBox {
            height: 10vh;
            font-size: 3vh;
            background-color: #00acee;
            position: relative;
        }
        .inputBox textarea {
            min-height: calc(100% - 12px);
            min-width: calc(100% - 12px);
            max-height: calc(100% - 12px);
            max-width: calc(100% - 12px);
            border: none;
            position: absolute;
            top: 2px;
            left: 2px;
            padding: 4px;
            outline: none;
        }

    </style>
</head>
<body>

<table class="main"><tbody>
    <tr>
        <td class="title">
            房间号：<span id="roomId"></span>；
            密码：<span id="roomPwd"></span>；
            昵称：<span id="nickName"></span>;
            userid：<span id="userId"></span>
        </td>
        <td class="online" rowspan="4">
            <ul>
            <div>u1</div><div>u1</div><div>u1</div><div>u1</div>
            <div>u1</div><div>u1</div><div>u1</div><div>u1</div>
            <div>u1</div><div>u1</div><div>u1</div><div>u1</div>
            <div>u1</div><div>u1</div><div>u1</div><div>u1</div>
            </ul>
        </td>
    </tr>
    <tr><td class="chatBox">聊天框</td></tr>
    <tr><td class="btns">
        <span onclick="send()">发送</span>
    </td></tr>
    <tr><td class="inputBox"><textarea id="inputArea"></textarea></td></tr>
</tbody></table>

<script>

    const inputDom = document.getElementById("inputArea");
    const keyPressed = {};
    inputDom.onkeydown = function (ev) {
        keyPressed[ev.code] = 1;
        if ("Enter" != ev.code) {
            return;
        }
        if (1 == keyPressed["ControlLeft"] || 1 == keyPressed["ControlRight"]) {
            inputDom.value += "\n";
        } else {
            ev.preventDefault();
            send();
        }
    }
    inputDom.onkeyup = function (ev) {
        keyPressed[ev.code] = 0;
    }

    //
    if (location.hash) {
        join(location.hash.substring(1));
    }

    const eventHandler = {
        "user_id": function (data) {
            document.getElementById("userId").innerText = data;
        },

    }

    let socket;

    function nextRoomId() {
        let req = new XMLHttpRequest();
        req.open('GET', "/wsk/chat/api/nextRoomId", false);
        req.send(null);
        return req.responseText;
    }

    function join(roomId) {
        const sckUrl = "ws://" + location.host + "/wsk/chat/" + roomId;

        socket = new WebSocket(sckUrl);
        //打开事件
        socket.onopen = function () {
            console.log("websocket已打开");
        };
        //获得消息事件
        socket.onmessage = function (resp) {
            let msg = resp.data;
            let inst = msg.substring(0, msg.indexOf('::'));
            let split = resp.data.split("::");
            if (eventHandler[split[0]]) {
                eventHandler[split[0]](split[1]);
            } else {
                console.log(resp.data);
            }
        };
        // //关闭事件
        socket.onclose = function () {
            console.log("websocket已关闭");
        };

        //发生了错误事件
        socket.onerror = function () {
            console.log("websocket发生了错误");
        }
    }

    function send() {
        let val = inputDom.value;
        if (!val) {
            showMsg("内容为空");
            return;
        }
        socket.send("msg_send::" + val);
        inputDom.value = "";
    }

    function showMsg(msg) {
        console.log(msg);
    }

</script>
</body>
</html>
